<template>
  <div id="app">
	  <div id="poss">
		  <span class="LoginText">欢迎使用九度远程控制</span>
		  <div id="password">
			  <el-input placeholder="请输入密码" v-model="input" show-password @change="BlckServe"></el-input>
		  </div>
		  
	  </div>
		    <!-- 对应的组件内容渲染到router-view中 -->
		    <router-view ></router-view>

    </div>
		
	 
  </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: 'app',

        data() {
            return {
                input: '',
                AppWidth: '',
            }

        },

        mounted() {
            this.Position()
        },

        methods: {
            BlckServe() {
                if (this.input == 'vizrt') {
                    this.$router.replace({
                        path: 'server'
                    })
                    let possdiv = document.getElementById('poss')
                    possdiv.style.display = 'none'

                } else {
                    this.$alert('请输入正确的密码', '密码错误', {
                        confirmButtonText: '确定',
                        // callback: action => {
                        //   this.$message({
                        //     type: 'info',
                        //     message: `action: ${ action }`
                        //   });
                        // }
                    });
                    // alert('密码错误')
                    this.$message('密码错误');
                }
            },
            Position() {
                let possdiv = document.getElementById('poss').style

                // let GetAppwidth=document.getElementById('app').clientWidth /2
                // possdiv.style.left=GetAppwidth
                // console.log(possdiv)

            }

        }

    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        /* margin-top: 10px; */
        background-color: #242731;
        width: 100%;
        height: 1000px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    #poss {
        width: 50%;
    }
    
    .LoginText {
        color: #FFFFFF;
        margin: 0 0 0 0;
        font-size: 20px;
    }
    
    #password {
        margin: 21px 0;
    }
</style>